<template>
  <div style="width: 100%; height: 100%">
    <guangbopanelCard  :headerFlag="true">
      <template #header>
        <div style="display: flex; align-items: center; width: 100%">
          <div style="width: 15%; display: flex; align-items: center">
            <span class="searchColor themfontColor">路由号</span>
            <el-input
              v-model.number="state.searchData.routerNo"
              placeholder="请输入"
              style="width: 60%; margin-left: 15px"
              clearable
            ></el-input>
          </div>
          <div style="width: 15%; display: flex; align-items: center">
            <span class="searchColor themfontColor">路由名称</span>
            <el-input
              v-model="state.searchData.routerName"
              placeholder="请输入"
              style="width: 60%; margin-left: 15px"
              clearable
            ></el-input>
          </div>
          <div>
            <el-button type="primary" @click="queryFn">查询</el-button>
            <el-button @click="resetFn">重置</el-button>
          </div>
        </div>
      </template>
      <template #article>
        <guangbovxeTB
          ref="guangbovxeTB"
          title="出局路由"
          :tableheads_show="state.tableheads_show"
          :listUrl="state.listUrl"
          :caozuoList="state.caozuoList"
          @addFn="addFn"
          @delAllFn="delAllFn"
          @edit="editFn"
          @shanchu="delFn"
        ></guangbovxeTB>
      </template>
    </guangbopanelCard>
    <!-- 新增 -->
    <el-dialog v-model="state.addFlag" width="30%" :before-close="handleClose">
      <template #title>
        <span class="themfontColor">{{ state.addTitle }}</span>
      </template>
      <div style="width: 100%; display: flex; justify-content: center">
        <el-form
          ref="formRef"
          :model="state.formData"
          :rules="state.formDataRules"
          label-width="120px"
        >
          <el-form-item label="路由号" prop="routerNo">
            <el-input
              v-model.number="state.formData.routerNo"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="路由名称" prop="routerName">
            <el-input
              v-model="state.formData.routerName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="路由选择码" prop="routerChoice">
            <el-select
              v-model="state.formData.routerChoice"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in state.luyouSelectData"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="路由选择源码" prop="routerSource">
            <el-select
              v-model="state.formData.routerSource"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in state.luyouYuanSelectData"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="中继群选择策略" prop="policy">
            <el-select v-model="state.formData.policy" placeholder="请选择">
              <el-option label="顺序" value="0"></el-option>
              <el-option label="循环" value="1"></el-option>
              <el-option label="最少使用优先" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="第一中继群" prop="firstGroupName">
            <el-input
              v-model="state.formData.firstGroupName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="第二中继群" prop="secondGroupName">
            <el-input
              v-model="state.formData.secondGroupName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="第三中继群" prop="thirdGroupName">
            <el-input
              v-model="state.formData.thirdGroupName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="saveAddFn"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, onMounted } from "vue-demi";
import axios from "@/utils/request";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import { table_headers } from "@/assets/table_headers/table_headers";
import usepagesStore from "@/store/modules/pages";
const userStore = usepagesStore();
const props = defineProps({});
const emit = defineEmits([""]);
const { proxy } = getCurrentInstance();
let state = reactive({
  searchData: {},
  addTitle: "新增",
  luyouSelectData: [], //路由选择码
  luyouYuanSelectData: [], //路由选择源码
  formData: {},
  formDataRules: {
    routerNo: [
      {
        required: true,
        message: "请输入呼叫源码",
        trigger: "blur",
      },
    ],
    type: [
      {
        required: true,
        message: "请输入业务类型",
        trigger: "blur",
      },
    ],
    routerChoice: [
      {
        required: true,
        message: "请输入路由选择码",
        trigger: "blur",
      },
    ],
    minLength: [
      {
        required: true,
        message: "请输入最小号长",
        trigger: "blur",
      },
    ],
    maxLength: [
      {
        required: true,
        message: "请输入最大号长",
        trigger: "blur",
      },
    ],
  },
  form: { num: 1, phone: [] },
  rules: {
    num: [
      {
        required: true,
        message: "请输入播放次数",
        trigger: "blur",
      },
    ],
    phone: [
      {
        required: true,
        message: "请选择广播号码",
        trigger: "change",
      },
    ],
  },
  addFlag: false,
  bofangFlag: false,
  caozuoList: [
    // {
    //   caozuoType: "bofang",
    //   label: "播放",
    //   type: "text",
    // },
    {
      caozuoType: "edit",
      label: "编辑",
      type: "text",
    },
    {
      caozuoType: "shanchu",
      label: "删除",
      type: "text",
    },
  ],
  selectData: [],
  tabledata: [],
  tableheads_show: computed(() => table_headers.t_sip_outbound),
  detailData: {},
  telephoneData: [],
  uploadData: {},
  uploadUrl: "",
  fileType: ["mp3"],
  listUrl: "/sip/config/outbound/list",
  addUrl: "/sip/config/outbound/add",
  editUrl: "/sip/config/outbound/edit",
  delUrl: "/sip/config/outbound/",
  detailUrl: "/sip/config/outbound/",
});
//新增弹层
const addFn = () => {
  //新增
  state.addTitle = "新增";
  state.addFlag = true;
};
const editFn = (row) => {
  //编辑
  console.log(row, "row");
  state.addTitle = "编辑";
  state.addFlag = true;
  state.formData = row;
  state.formData.type = state.formData.type + "";
};
const handleClose = () => {
  //关闭
  state.addFlag = false;
  state.formData = {};
  proxy.$refs["formRef"].resetFields();
};
const saveAddFn = () => {
  //保存
  let url = state.addUrl;
  if (state.addTitle == "新增") {
    url = state.addUrl;
  } else {
    url = state.editUrl;
  }
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      state.formData.routerChoice = Number(state.formData.routerChoice);
      state.formData.routerSource = Number(state.formData.routerSource);
      state.formData.policy = Number(state.formData.policy);
      axios
        .post(url, state.formData)
        .then((res) => {
          if (res.code == 200) {
            // state.addFlag = false;
            ElMessage.success(res.msg);
            proxy.$refs["guangbovxeTB"].getList();
            handleClose();
          } else {
            ElMessage.error(res.msg);
          }
        })
        .catch((err) => {
          ElMessage.error(res.msg);
        });
    }
  });
};
const delAllFn = () => {
  if (userStore.records.length == 0) {
    ElMessage.warning("请选择要删除的记录");
    return;
  } else {
    let str = [];
    userStore.records.forEach((item) => {
      str.push(item.id);
    });
    ElMessageBox.confirm("确认删除?", "提示", {
      confirmButtonText: "删除",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        axios.delete(state.delUrl + str.join(",")).then((res) => {
          ElMessage.success("删除成功");
          userStore.records = [];
          proxy.$refs["guangbovxeTB"].getList();
        });
      })
      .catch(() => {});
  }
};
const delFn = (row) => {
  //删除
  state.detailData = row;
  ElMessageBox.confirm("确认删除?", "提示", {
    confirmButtonText: "删除",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      axios.delete(state.delUrl + row.id).then((res) => {
        ElMessage.success("删除成功");
        proxy.$refs["guangbovxeTB"].getList();
      });
    })
    .catch(() => {});
};
const queryFn = () => {
  //查询
  let obj = {};
  obj.routerNo = state.searchData.routerNo;
  obj.routerName = state.searchData.routerName;
  proxy.$refs["guangbovxeTB"].state.searchData = obj;
  proxy.$refs["guangbovxeTB"].getList();
};
const resetFn = () => {
  //重置
  let obj = {};
  state.searchData={}
  proxy.$refs["guangbovxeTB"].state.searchData = obj;
  proxy.$refs["guangbovxeTB"].getList();
};

function getSelect() {
  let arr = [];
  let arr2 = [];
  //获取路由选择码
  axios.post("/sip/config/router/listNoPage", {}).then((res) => {
    arr = res.data.map((item) => {
      return {
        label: item.routerChoice,
        value: item.routerChoice,
      };
    });
    //去重
    arr = Array.from(new Set(arr.map((item) => item.label))).map((label) => {
      return {
        label,
        value: label,
      };
    });
    state.luyouSelectData = arr;
  });
  //获取路由选择源码
  axios.post("/sip/config/source/listNoPage", {}).then((res) => {
    arr2 = res.data.map((item) => {
      return {
        label: item.routerSource,
        value: item.routerSource,
      };
    });
    //去重
    arr2 = Array.from(new Set(arr2.map((item) => item.label))).map((label) => {
      return {
        label,
        value: label,
      };
    });
    state.luyouYuanSelectData = arr2;
  });
}
onMounted(() => {
  getSelect();
  queryFn();
});
</script>